<template>
  <div class>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="5">
          <el-button type="primary" @click="handleAdd">添加通知</el-button>
        </el-col>
      </el-row>

      <el-table border style="width: 100%; margin-top:30px" :data="informList">
        <el-table-column label="添加日期" prop="createTime" width="100px"></el-table-column>
        <el-table-column label="内容" prop="content" width="1300px"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" @click="handleEdit(scope.row)"></el-button>
            <el-button type="primary" icon="el-icon-delete" @click="handleDelet(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="prev, pager, next"
        :current-page="currentPage"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </el-card>

    <!-- 添加商品表单弹框 -->
    <el-dialog :visible.sync="addInformFormVisible" width="30%">
      <el-form :model="addInformForm" label-width="80px">
        <el-form-item label="简介">
          <el-input type="textarea" v-model="addInformForm.content"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addInformFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addInform">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLogin: false,
      currentPage: 1,
      addInformFormVisible: false,
      informList: [],
      addInformForm: {
        content: ""
      }
    };
  },
  mounted() {
    this.currentPage = 1;
    this.getInformList(this.currentPage);
  },
  methods: {
    handleAdd() {
      this.addInformFormVisible = true;
    },
    handleEdit(row) {},
    handleDelet(row) {},

    // 获取所有通知
    async getInformList(val) {
      const { data: res } = await this.$http.get("/admin/getInformList/" + val);

      if (res.code == 200) {
        this.informList = res.data.informList;
      } else {
        this.$message({
          type: "info",
          message: "获取列表失败"
        });
      }
    },
    // 添加通知
    async addInform() {
      this.addInformFormVisible = false;

      const { data: res } = await this.$http.post(
        "/admin/putInform",
        this.addInformForm
      );
      if (res.code == 200) {
        this.$message({
          type: "success",
          message: "添加成功!"
        });
      } else {
        this.$message.error(res.message);
      }
    },

    //换页
    handleCurrentChange(val) {
      // console.log(val);
      this.currentPage = val;
      this.getInformList(val);
    }
  }
};
</script>

<style lang="less" scoped>
</style>>
